<style scoped>
    .modal{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(51,51,51,0.6);
        text-align: center;
        z-index: 9999;
    }
    .modal-box{
        position:absolute;
        top:45%;
        left:50%;
        width:5.4rem /* 270/50 */;
        margin-left:-2.7rem;
        background-color: #fff;
        border-radius: 0.08rem;
        overflow: hidden;
    }
    .modal-box .modal_header{
        padding:0.2rem 0.3rem;
        padding-bottom: 0;
        display: flex;
        justify-content: flex-end;
    }
    .modal-box .modal_header .close_icon{
        width: 0.24rem;
        height: 0.24rem;
    }
    .modal-box .content{
        padding:.7rem 0 .78rem;
        border-bottom: .02rem solid #eee;
        word-break:break-all;
        line-height:1.5;
        font-size: .32rem;
        color: #333333;
    }
    /deep/ .modal-box .content p:nth-child(1){
        color: #333;
        font-size: .32rem;
        font-weight:400;
        line-height: .4rem;
    }
    /deep/ .modal-box .content p:nth-child(2){
        line-height: .32rem;
        font-size: .24rem;
        color: #999;
        margin-top: .14rem;
    }
    .modal-box .btns{
        height:.8rem;
        line-height:.8rem;
        font-size: .34rem;
    }
    .modal-box .btns span{
        display:block;
        /* color: #007AFF; */
        color: #14C877;
    }

    .modal-box .btns.two span{
        width:50%;
        float:left;
        font-size: .34rem;
        color: #14C877;
    }

    .modal-box .btns.two span:first-child{
        border-right:1px solid #eee;
        color: #666;
    }
</style>
<template>
	<div class="modal" v-show="show">
        <div class="modal-box scaleIn c-666" ref="modal-box" :style="{'margin-top':mt}">
            <div class="modal_header" v-if="modal.showClose">
                <img class="close_icon" src="~@/assets/imgs/components/icon_pay_close.png" @click="show=false">
            </div>
            <div class="content" v-html="modal.content"></div>
            <div class="btns" :class="{ two: modal.btns.length > 1}">
               <template  v-for="(btn,index) in modal.btns">
                   <span v-if="index < 2" :key="index" :style="{'color': modal.colors && modal.colors[index] ? modal.colors[index] : ''}" @click="handleClick(modal.callbacks[index])">{{btn}}</span>
               </template>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
	computed: mapState({
		modal: state => state.app.modal
	}),
    data: function(){
		return {
			show:false,
            mt:''
		}
	},
    methods: {
        handleClick:function(callback){
        	this.show=false;
        	if(callback && typeof(callback)==='function'){
        		callback()
        	}
        }
    },
    watch: {
  		'modal': {
  			handler: function(val, oldVal){
		    	this.show = true;
                this.$nextTick(()=>{
                  this.mt='-'+this.$refs['modal-box'].offsetHeight/2+'px';
                })
  			},
  			deep: true
  		}
  	}
}	
</script>